import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/common/app.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:flutter_swiper_null_safety_flutter3/flutter_swiper_null_safety_flutter3.dart';

class HomeSwiperView extends StatelessWidget {
  const HomeSwiperView({
    super.key,
    this.items = const [],
  });
  final List<dynamic> items;

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(UiTheme.boxRadiusX),
      child: Container(
        color: UiTheme(context).matchColor(
          Colors.grey[100],
          UiTheme(context).panelBackground,
        ),
        child: AspectRatio(
          aspectRatio: 21 / 9,
          child: items.isEmpty
              ? Container()
              : Swiper.list(
                  list: items,
                  builder: (context, data, index) {
                    return UiTap(
                      onTap: () {
                        App.push(data['url'] ?? '', openType: data['target']);
                      },
                      child: CachedNetworkImage(
                        fit: BoxFit.cover,
                        imageUrl: data['image'],
                      ),
                    );
                  },
                  autoplay: true,
                  autoplayDelay: 5000,
                  pagination: SwiperCustomPagination(
                    builder: (context, config) {
                      return Align(
                        alignment: Alignment.bottomCenter,
                        child: Padding(
                          padding: const EdgeInsets.only(bottom: 8.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              for (var i = 0; i < config.itemCount; i++)
                                Container(
                                  height: 8,
                                  width: 8,
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 2),
                                  decoration: BoxDecoration(
                                    color: config.activeIndex == i
                                        ? Colors.white
                                        : Colors.white24,
                                    borderRadius: BorderRadius.circular(5),
                                  ),
                                )
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                ),
        ),
      ),
    );
  }
}
